/* =========================
   SECCION VERSIONES
========================= */

.container-versiones{

    width: 100%;

    padding: 120px 6%;

    background: #f5f3ef;
}

/* =========================
   TITULO
========================= */

.container-versiones .titulo-servicios{

    text-align: center;

    margin-bottom: 100px;
}

.container-versiones .titulo-servicios h2{

    font-size: clamp(3rem, 7vw, 6rem);

    font-weight: 300;

    letter-spacing: 1px;

    line-height: 1.05;

    color: #111;

    font-family: serif;

    margin-bottom: 30px;
}

.container-versiones .titulo-servicios p{

    max-width: 700px;

    margin: auto;

    font-size: 1rem;

    line-height: 2;

    color: #666;
}

/* =========================
   FILAS
========================= */

.fila-version{

    margin-bottom: 90px;
}

/* LINEA DECORATIVA */

.fila-version::before{

    content: "";

    display: block;

    width: 80px;

    height: 1px;

    background: #c8c8c8;

    margin: 0 auto 30px auto;
}

.fila-version h3{

    text-align: center;

    font-size: 1.7rem;

    font-weight: 400;

    letter-spacing: 3px;

    text-transform: uppercase;

    margin-bottom: 40px;

    color: #111;

    font-family: serif;
}

/* =========================
   GRID
========================= */

.grid-version{

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

    max-width: 1300px;

    margin: auto;
}

/* =========================
   PHOTOCARDS
========================= */

.grid-version img{

    width: 100%;

    height: 290px;

    object-fit: cover;

    border-radius: 24px;

    border: 1px solid rgba(0,0,0,.06);

    box-shadow:
    0 8px 20px rgba(0,0,0,.06);

    transition:
    transform .45s ease,
    box-shadow .45s ease,
    filter .45s ease;

    filter: saturate(.95);

    cursor: pointer;
}

/* =========================
   HOVER
========================= */

.grid-version img:hover{

    transform:
    translateY(-10px)
    scale(1.03);

    filter: saturate(1.05);

    box-shadow:
    0 25px 50px rgba(0,0,0,.18),
    0 10px 25px rgba(0,0,0,.10);
}

/* =========================
   TABLET
========================= */

@media(max-width:992px){

    .container-versiones{

        padding: 100px 6%;
    }

    .grid-version{

        grid-template-columns: repeat(2,1fr);
    }

    .grid-version img{

        height: 260px;
    }

    .container-versiones .titulo-servicios h2{

        font-size: 4rem;
    }

    .fila-version h3{

        font-size: 1.5rem;
    }
}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

    .container-versiones{

        padding: 80px 6%;
    }

    .container-versiones .titulo-servicios{

        margin-bottom: 70px;
    }

    .container-versiones .titulo-servicios h2{

        font-size: 2.8rem;

        line-height: 1.15;
    }

    .container-versiones .titulo-servicios p{

        font-size: .95rem;

        line-height: 1.8;
    }

    .grid-version{

        grid-template-columns: 1fr;

        gap: 20px;
    }

    .grid-version img{

        height: 340px;

        border-radius: 20px;
    }

    .fila-version{

        margin-bottom: 70px;
    }

    .fila-version h3{

        font-size: 1.2rem;

        letter-spacing: 2px;
    }
}

/* =========================
   MOBILE PEQUEÑO
========================= */

@media(max-width:480px){

    .container-versiones{

        padding: 60px 5%;
    }

    .container-versiones .titulo-servicios h2{

        font-size: 2.2rem;
    }

    .container-versiones .titulo-servicios p{

        font-size: .9rem;
    }

    .grid-version img{

        height: 300px;
    }

    .fila-version h3{

        font-size: 1rem;
    }
}